/*
 * @Author: xianfuyou
 * @Date: 2022-03-31 11:45:29
 * @LastEditors: your name
 * @LastEditTime: 2022-04-06 17:02:28
 * @Description: file content
 */
import React, { useRef, useState } from 'react'
import ButtonWarpCpn from '../CommBtn/CommBtn'
import {
  Row,
  Col,
  Form,
  Input,
  Radio,
  Button,
  Select,
  DatePicker
} from 'antd'

import { CheckOutlined, ZoomOutOutlined, ZoomInOutlined } from '@ant-design/icons';

import './css/AddOrderInfo.css'

const { Option } = Select;
// 商品类别级联选择器
const provinceData = ['Zhejiang', 'Jiangsu'];
const cityData = {
  Zhejiang: ['Hangzhou', 'Ningbo', 'Wenzhou'],
  Jiangsu: ['Nanjing', 'Suzhou', 'Zhenjiang'],
};
// 其他
const otherOptions = [
  {
    key: 1,
    title: '有跟单',
    isChecked: false
  },
  {
    key: 2,
    title: '有订单',
    isChecked: false
  },
  {
    key: 3,
    title: '有合同',
    isChecked: false
  },
  {
    key: 4,
    title: '有售后',
    isChecked: false
  },
  {
    key: 5,
    title: '有附件',
    isChecked: false
  }
]

export default function AddOrderInfo() {
  // 是否显示高级搜索
  const [isHighSearch, setIsHighSearch] = useState(true)
  // 商品类别级联选择器
  const [cities, setCities] = React.useState(cityData[provinceData[0]]);
  const [secondCity, setSecondCity] = React.useState(cityData[provinceData[0]][0]);
  const [otherOptionsState, setotherOptionsState] = useState(otherOptions)
  // 定位表单控件
  const addFormRef = useRef(null)
  // 显示隐藏表单
  const showHiddenForm = () => {
    setIsHighSearch(!isHighSearch)
  }

  // 商品类别级联选择器
  const handleProvinceChange = value => {
    setCities(cityData[value]);
    setSecondCity(cityData[value][0]);
  };

  const onSecondCityChange = value => {
    setSecondCity(value);
  };


  const otherOptionsClick = (item) => {
    let temp = otherOptionsState.filter(data => {
      return data.key === item.key
    })
    temp[0].isChecked = !temp[0].isChecked
    let temp2 = otherOptionsState
    for (let index = 0; index < temp2.length; index++) {
      if (temp[0].key === temp2[index].key) {
        temp2[index] = temp[0]
      }

    }
    setotherOptionsState([...temp2])
  }

  // 表单部分
  // 提交表单获取表单内容
  const onFinish = (values) => {
    const resValues = {
      ...values,
      "overStart": values['overStart'] && values['overStart'].format('YYYY-MM-DD HH:mm:ss'),
      "overEnd": values['overEnd'] && values['overEnd'].format('YYYY-MM-DD HH:mm:ss'),
      "enterStart": values['enterStart'] && values['enterStart'].format('YYYY-MM-DD HH:mm:ss'),
      "enterEnd": values['enterEnd'] && values['enterEnd'].format('YYYY-MM-DD HH:mm:ss')
    }
    console.log('resValues', resValues);
  };
  // 重置表单
  const onReset = () => {
    addFormRef.current.resetFields();
  };
  return (
    <div className="AddOrderInfo">
      {/* 高级搜索表单部分 */}
      {
        isHighSearch ? (
          <Row className={'highFrom'}>
            <Col className={"flag"} span={24}>
              <Row justify={'space-between'} align={'middle'}>
                <Col span={24}>
                  <Form
                    labelCol={{
                      span: 8,
                    }}
                    wrapperCol={{
                      span: 16,
                    }}
                    ref={addFormRef} name="control-ref" onFinish={onFinish}
                  >
                    {/* 高级搜索表单部分 */}
                    <Row className="fromDataSection" justify={'space-around'}>
                      <Col span={6}>
                        <Form.Item label="编号" name="id">
                          <Input size="small" />
                        </Form.Item>
                        <Form.Item label="职位" name="job">
                          <Input size="small" />
                        </Form.Item>
                        <Form.Item label="网址" name="url">
                          <Input size="small" />
                        </Form.Item>
                        <Form.Item label="最后更新" style={{ marginBottom: 0 }}>
                          <Form.Item name="overStart"
                            style={{ display: 'inline-block', width: 'calc(50% - 12px)' }}
                          >
                            <DatePicker size="small" />
                          </Form.Item>
                          <span
                            style={{ display: 'inline-block', width: '24px', lineHeight: '32px', textAlign: 'center' }}
                          >
                            -
                          </span>
                          <Form.Item name="overEnd" style={{ display: 'inline-block', width: 'calc(50% - 12px)' }}>
                            <DatePicker size="small" />
                          </Form.Item>
                        </Form.Item>
                        <Form.Item label="客户类型" name="clientType">
                          <Select size="small">
                            <Select.Option value="demo">Demo</Select.Option>
                          </Select>
                        </Form.Item>
                        <Form.Item label="商品类型">
                          <Select size="small" defaultValue={provinceData[0]} style={{ width: 105, "marginRight": '5px' }} onChange={handleProvinceChange}>
                            {provinceData.map(province => (
                              <Option key={province}>{province}</Option>
                            ))}
                          </Select>
                          <Select size="small" style={{ width: 105 }} value={secondCity} onChange={onSecondCityChange}>
                            {cities.map(city => (
                              <Option key={city}>{city}</Option>
                            ))}
                          </Select>
                        </Form.Item>
                        <Form.Item label="业务员" name="salesman">
                          <Select size="small">
                            <Select.Option value="demo">Demo</Select.Option>
                          </Select>
                        </Form.Item>
                      </Col>
                      <Col span={6}>
                        <Form.Item label="客户名称" name="clientName">
                          <Input size="small" />
                        </Form.Item>
                        <Form.Item label="客户级别" name="clientLevel">
                          <Select size="small">
                            <Select.Option value="demo">Demo</Select.Option>
                          </Select>
                        </Form.Item>
                        <Form.Item label="手机号码" name="tel">
                          <Input size="small" />
                        </Form.Item>
                        <Form.Item label="详细地址" name="detailsAddress">
                          <Input size="small" />
                        </Form.Item>
                        <Form.Item label="所属行业" name="belongJob">
                          <Select size="small">
                            <Select.Option value="demo">Demo</Select.Option>
                          </Select>
                        </Form.Item>
                        <Form.Item label="所在地区">
                          <Select size="small" defaultValue={provinceData[0]} style={{ width: 105, "marginRight": '5px' }} onChange={handleProvinceChange}>
                            {provinceData.map(province => (
                              <Option key={province}>{province}</Option>
                            ))}
                          </Select>
                          <Select size="small" style={{ width: 105 }} value={secondCity} onChange={onSecondCityChange}>
                            {cities.map(city => (
                              <Option key={city}>{city}</Option>
                            ))}
                          </Select>
                        </Form.Item>
                        <Form.Item label="邮编" name="postcode">
                          <Input size="small" />
                        </Form.Item>
                      </Col>
                      <Col span={6}>
                        <Form.Item label="联系人" name="linkman">
                          <Input size="small" />
                        </Form.Item>
                        <Form.Item label="部门" name="department">
                          <Select size="small">
                            <Select.Option value="demo">Demo</Select.Option>
                          </Select>
                        </Form.Item>
                        <Form.Item label="电子邮箱" name="email">
                          <Input size="small" />
                        </Form.Item>
                        <Form.Item label="录入时间" style={{ marginBottom: 0 }}>
                          <Form.Item name="enterStart"
                            style={{ display: 'inline-block', width: 'calc(50% - 12px)' }}
                          >
                            <DatePicker size="small" />
                          </Form.Item>
                          <span
                            style={{ display: 'inline-block', width: '24px', lineHeight: '32px', textAlign: 'center' }}
                          >
                            -
                          </span>
                          <Form.Item name="enterEnd" style={{ display: 'inline-block', width: 'calc(50% - 12px)' }}>
                            <DatePicker size="small" />
                          </Form.Item>
                        </Form.Item>
                        <Form.Item label="QQ" name="QQ">
                          <Input size="small" />
                        </Form.Item>
                        <Form.Item label="客户来源" name="clientOrigin">
                          <Select size="small">
                            <Select.Option value="demo">Demo</Select.Option>
                          </Select>
                        </Form.Item>
                        <Form.Item label="录入者" name="enterPerson">
                          <Select size="small">
                            <Select.Option value="demo">Demo</Select.Option>
                          </Select>
                        </Form.Item>
                      </Col>
                    </Row>
                    {/* 确认其他按钮 */}
                    <Row justify="start" className="otherbutton">
                      <Col span="12" offset='2'>
                        <div style={{ display: 'flex', marginLeft: '2%' }}>
                          <div>其他：</div>
                          {
                            otherOptionsState.map((item) => {
                              return <div key={item.title} className={item.isChecked === true ? 'activeOtherOptions' : 'AddListOther'} onClick={() => {
                                otherOptionsClick(item)
                              }}>
                                <div style={{ marginTop: '2px', marginLeft: '5px', width: '70%' }}>
                                  {item.title}
                                </div>
                                <div style={{ fontSize: '20px', width: '30%', backgroundColor: '#fff' }}>
                                  <CheckOutlined className={item.isChecked === true ? 'AddContractActiveIconColor acitve' : 'AddContracticonColor'} />
                                </div>
                              </div>
                            })
                          }
                        </div>
                      </Col>
                    </Row>
                    {/* 按钮部分 */}
                    <Row className="formSearch" justify={'center'} align={'middle'}>
                      <Col>
                        <Form.Item>
                          {/* 高级搜索处理部分 */}
                          <Col className="formSearchItem">
                            <ButtonWarpCpn bgcolor="#49b377" type="primary" htmlType="submit">立即搜索</ButtonWarpCpn>
                            <ButtonWarpCpn bgcolor="#505050" htmlType="button" onClick={onReset}>清空条件</ButtonWarpCpn>
                          </Col>
                        </Form.Item>
                      </Col>
                    </Row>
                  </Form>
                </Col>
              </Row>
            </Col>
          </Row>
        ) : <Row className={'basicSearch'} justify="center" gutter={5}>
          <Col>
            <Input placeholder="客户名称 联系人 手机号码" size="small"></Input>
          </Col>
          <Col>
            <Button size="small" style={{ 'backgroundColor': '#2396b2', 'color': '#fff' }}>立即搜索</Button>
          </Col>
        </Row>
      }
      <Row justify={'center'} className={'showHighSearch'}>
        <Col>
          {/* 切换搜索状态 */}
          {
            isHighSearch ?
              <ButtonWarpCpn bgcolor="#cc2626" onClick={() => { showHiddenForm() }}><ZoomOutOutlined />关闭高级搜索</ButtonWarpCpn> :
              <ButtonWarpCpn bgcolor="#cc2626" onClick={() => { showHiddenForm() }}><ZoomInOutlined />展开高级搜索</ButtonWarpCpn>
          }
        </Col>
      </Row>
    </div>
  )
}
